<template>
	<view>
		<nav-bar color="#000000" bgc="#ffffff" bbtn>售后进度</nav-bar>
		<view class="section-1">
			<view class="step" v-for="(item,i) in data" :key="i">
				<view class="dot" :class="{'dot-first':(i==0?true: false)}"></view>
				<view class="message">
					<text class="time">{{item.add_time}}</text>
					<text>{{item.title}}</text>
				</view>
			</view>
			<view class="step">
				<view class="dot"></view>
			</view>
		</view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			id: 0,
			data: []
		};
	},
	methods: {
		getData(){
			this.ajaxJson('serviceList', {id: this.id}, res => {
				this.data = res.list
			});
		}
	},
	onLoad(options){
		this.id = options.id
		this.getData()
	}
};
</script>
<style lang="scss" scoped>
* {
	padding: 0;
	margin: 0;
	font-size: 0.75rem;
	box-sizing: border-box;
}
page {
	background: #FFFFFF;
}
.section-1{
	margin: 110rpx auto 0;
	width: 80%;
}
.step {
	padding: 0 10rpx;
	position: relative;
	border-left: 3px #ff957b solid;
	.dot {
		width: 30rpx;
		height: 30rpx;
		position: absolute;
		left: -0.05rem;
		top: 0;
		border: 3px #ff957b solid;
		border-radius: 20rpx;
		transform: translate(-50%,-50%);
		background: #ff957b;
	}
	
	.message {
		margin-left: 50rpx;
		padding-bottom: 30rpx;
		display: flex;
		flex-direction: column;
		.time {
			font-size: 32rpx;
			font-weight: bold;
		}
	}
	
}
.dot-first{
		background: #fff !important;
	}


</style>
